<script lang="ts" setup></script>

<template>
	<view>
		<view class="fixed top-0 z-999 bg-blue">
			<view
				class="flex"
				:style="{
					height: mpWxPos.headerHeight + 'px',
					width: '750rpx'
				}">
				<!-- logo -->
				<view
					:style="{
						'margin-top': mpWxPos.statusBarHeight + 'px'
					}">
					<view :style="{ 'margin-left': mpWxPos.logoLeft + 'px' }">
						<u-image
							mode="heightFix"
							:src="mpWxPos.logoUrl"
							:height="mpWxPos.logoHeight"></u-image>
					</view>
				</view>
			</view>
		</view>

		<view class="container bg-gray-100 min-h-screen">
			<view :style="{ 'padding-top': mpWxPos.headerHeight + 'px' }">
				<!-- 轮播图区域 -->
				<swiper
					v-if="false"
					class="rounded-lg mt-2 mx-2 h-[200px]"
					:indicator-dots="true"
					:autoplay="true"
					interval="3000">
					<swiper-item v-for="(item, index) in banners" :key="index">
						<image :src="item.url" mode="aspectFill" class="w-full h-full rounded-lg" />
					</swiper-item>
				</swiper>

				<!-- 搜索框 -->
				<view class="mx-2 mt-2">
					<u-search
						v-model="productPaginate.searchStr"
						placeholder="将搜索产品名及标签"
						:show-action="true"
						action-text="搜索"
						@search="handleSearch"
						@custom="handleSearch"
						bg-color="#ffffff"
						shape="square"></u-search>
				</view>

				<!-- 产品列表 -->
				<view class="product-list px-2 mt-2">
					<view class="grid grid-cols-2 gap-2">
						<view
							v-for="(item, index) in productPaginate.list"
							:key="index"
							class="bg-white rounded-lg overflow-hidden shadow-sm"
							@click="goToProductDetail(item.id)">
							<!-- 使用 uView 组件 -->
							<!--<image :src="item._cover_url" :mode="`aspectFit`" class="w-full h-0" />-->
							<u-image
								class="max-h-full"
								:src="item.cover"
								width="360rpx"
								mode="aspectFit"></u-image>
							<view class="p-2">
								<view class="truncate-n color-gray-6 font-bold font-size-3 h-2rem">
									{{ item.name }}
								</view>
								<view class="grid grid-cols-2 gap-1 mt-1">
									<view class="color-red font-size-3 font-bold">
										{{ `¥${item.price}` }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部保留 -->
				<view class="h-2"></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { Pagination, PaginateMeta } from '@/types'
export default {
	data() {
		return {
			banners: [],
			cateList: [],
			productPaginate: <Pagination>{
				page: 1,
				pageSize: 10,
				pageCount: 0,
				totalCount: 0,
				hasMore: true,
				cateId: 0,
				list: [],
				searchStr: ''
			}
		}
	},
	computed: {
		mpWxPos() {
			return this.$store.getters['mpWxPos/getMpWxPos']
		}
	},
	mounted() {
		// this.getBanners()
		// this.getCateRoots()
		console.log('Component mounted.')
		this.getProductList()
	},
	methods: {
		// 获取banner图
		async getBanners() {
			const res = await this.$api.xcxGuestPost('/guest/pub/banner-list')
			this.banners = res.data.list
		},
		// 获取根分类
		async getCateRoots() {
			this.cateList = []
			this.cateList.push({
				id: 0,
				name: '全部',
				isActive: true
			})
			const res = await this.$api.xcxGuestPost('/guest/pub/category-roots')
			res.data.list.forEach((item) => {
				this.cateList.push({
					id: item.id,
					name: item.name,
					isActive: false
				})
			})
		},
		// 处理搜索
		handleSearch() {
			this.productPaginate.page = 1
			this.productPaginate.list = []
			this.getProductList()
		},
		// 跳转到商品详情
		goToProductDetail(id) {
			uni.navigateTo({
				url: `/pages/product/Detail?id=${id}`
			})
		},
		// 获取商品列表
		async getProductList() {
			const params = {
				page: this.productPaginate.page,
				pageSize: this.productPaginate.pageSize,
				searchStr: this.productPaginate.searchStr
			}
			const res = await this.$api.xcxPost('/goods/product/site-list', params)
			console.log(res)
			res.data.items.forEach((item) => {
				if (!item._sku_cover_url) {
					item._sku_cover_url = this.$api.gdImg(100, 100, 16, '无封面')
				}
				this.productPaginate.list.push(item)
			})
			const meta = <PaginateMeta>res.data._meta
			this.productPaginate.page = meta.currentPage
			this.productPaginate.pageCount = meta.pageCount
			this.productPaginate.totalCount = meta.totalCount
			this.productPaginate.hasMore =
				this.productPaginate.page < this.productPaginate.pageCount
		}
	},
	// 微信分享配置
	onShareAppMessage() {
		return {
			title: '丫丫制板', // 分享标题
			path: '/pages/index/index', // 分享路径
			imageUrl: this.mpWxPos.logoUrl // 分享图片URL
		}
	},
	onReachBottom() {
		if (this.productPaginate.hasMore) {
			this.productPaginate.page++
			this.getProductList()
		} else {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
/* 使用Unocss原子化类 + 自定义样式 */
.truncate-n {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.cate-active {
	color: white;
	background: cornflowerblue;
}
</style>
